<template>
  <div>
    <div class="bg-white grid-content">
    </div>
    <div class="bg-white grid-content">
      <div style="overflow: hidden; ">
        <div class="mytitle">榆树林油田间抽井制度汇总</div>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" :header-cell-style="{background:'#F5F7FA',color:'#909399'}" border>
        <el-table-column v-if="show" type="index" label="序号" :index="indexMethod">
        </el-table-column>
        <el-table-column align="center" fixed="left" prop="wellId" label="井ID">
        </el-table-column>
        <el-table-column align="center" fixed="left" prop="siteName" label="作业区">
        </el-table-column>
        <el-table-column align="center" fixed="left" prop="teamName" label="队别">
        </el-table-column>
        <el-table-column align="center" fixed="left" prop="DailyWaterProduction" label="日产液">
        </el-table-column>
        <el-table-column align="center" fixed="left" prop="DailyOilProduction" label="日产油">
        </el-table-column>
        <el-table-column align="center" fixed="left" prop="containingWater" label="含水">
        </el-table-column>
        <el-table-column align="center" fixed="left" prop="rountingPreiod" label="沉没度（m）">
        </el-table-column>
        <el-table-column align="center" fixed="left" prop="rountingDate" label="月启抽天数（天）">
        </el-table-column>
        <el-table-column align="center" fixed="left" prop="liqMonth" label="月产液（t）">
        </el-table-column>
        <el-table-column align="center" fixed="left" prop="monthOil" label="月产油（t）">
        </el-table-column>
        <el-table-column align="center" fixed="left" prop="rountingProblem" label="间抽制度">
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination align='right'
                     background
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="pageNo"
                     :page-sizes="[5,10, 20, 30, 40, 50]"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>

    </div>
  </div>
</template>

<script>
import fdfxtApi from '@/api/sjtb/scgl/fdfxtrb';

export default {
  data() {
    return {
      show:false,//隐藏序列
      pageNo: 1, //当前页码
      pageSize: 10, //每页显示数量
      total: 0, //总数量
      currentPage: 1,//当前页码
      //时间快捷选择
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      searchDate:"",
      //  表头数据
      tableHead: [
        { val: "指标11111", item: "target1" },
        { val: "指标2", item: "target2" },
        { val: "指标3", item: "target3" },
        { val: "指标4", item: "target4" },
        { val: "指标5", item: "target5" },
      ],
      // 表格数据
      tableData: [],
      //excel数据
      excelData:[],
      approveStatus:'',
      fdfxtrbForm:{},
      // // table数据总条数
      // tableTotal: 30,
      // // 分页数
      // currentSize: 10,
      // //当前页
      // currentPage: 4
    };
  },
  mounted(){

    this.search();
  },
  methods: {
    /**
     * 查询列表
     */
    async search() {
      let res = await fdfxtApi.getJcjzdList({pageNo:this.pageNo,pageSize:this.pageSize});
      //判断是否成功
      if(res.success){
        console.log(res.data);
        //赋值
        this.tableData = res.data.records;
        //总数量
        this.total = res.data.total;
      }
    },
    //条件查询
    formSearch(){
      // console.log(this.searchDate);
      this.search();

    },
    //报表导出下载
    download() {
      require.ensure([], async () => {
        const { export_json_to_excel } = require('@/vendor/Export2Excel');//此处把路径要写对
        //复杂表头书写
        //添加表格id
        // var myindex = [];
        // for (var i = 0; i < this.total; i++) {
        //   myindex[i] = i + 1
        // }
        // var newindex = myindex.map(item => {
        //   console.log(item)
        //   return {
        //     index: item
        //   }
        // });

        let res = await fdfxtApi.getFdfxtList({pageNo:1,pageSize:this.total,approveStatus:'',startDate:this.searchDate[0],endDate:this.searchDate[1]});
        if(res.success){
          this.excelData =  res.data.records;
        }
        // console.log('myindex', myindex);
        // console.log('newindex', newindex);
        // //将添加的序号加入到表格中形成新的mergeArr表格
        // let mergeArr = [newindex, this.excelData].reduce((prev, curr) => {
        //   return prev.map((item, index) => {
        //     return Object.assign(item, curr[index]);
        //   });
        // });
        // var result = Object.assign(newindex,this.tableData)
        // console.log('mergeArr', mergeArr);
        // console.log('tableData', this.excelData);

        // const tHeader = ['日期', '姓名', '地址'];
        // // 上面设置Excel的表格第一行的标题
        //一级表头
        const multiHeader = [['日期','树2队','','','','','树8队','','','','','树16队','','','','','树101队','','','','','作业区','','','','']];
        //二级表头
        const header = ['','注水', '集输', '机采', '生活', '合计','注水', '集输', '机采', '生活', '合计','注水', '集输', '机采', '生活', '合计','注气', '一期', '机采', '二期', '合计', '注水', '集输', '机采', '生活', '合计'];
        //表头字段
        const filterVal = ['rq', 'serZs', 'serJs', 'serJc', 'serSh', 'serHj', 'sbaZs', 'sbaJs', 'sbaJc', 'sbaSh', 'sbaHj', 'sslZs', 'sslJs','sslJc','sslSh','sslHj', 'sylyZq', 'sylyYq','sylyJc','sylyEq','sylyHj', 'zyqZs', 'zyqJs','zyqJc','zyqSh','zyqHj'];
        //需要合并的单元格
        const merges = ['A1:A2','B1:F1','G1:K1','L1:P1','Q1:U1','V1:Z1'];
        //表头样式
        let headerStyle = ['A1','B1','C1','D1','E1','F1','G1','H1','I1','J1','K1','L1','M1','N1','O1','P1','Q1','R1','S1','T1','U1','V1','W1','X1','Y1','Z1'];
        // 上面的index、nickName、name是tableData里对象的属性
        console.log(this.excelData);
        // const list = this.tableData;  //把data里的tableData存到list
        // const data = this.formatJson(filterVal, list);
        const list = this.excelData;
        const data = this.formatJson(filterVal, list);

        export_json_to_excel({
          //header: tHeader,
          multiHeader:multiHeader,
          header:header,
          merges:merges,
          headerStyle:headerStyle  ,
          data: data,
          filename: '分队分系统日报',
          autoWidth: true,
          bookType: 'xlsx'
        });//"列表excel"  是下载后的表名 可修改
        this.$message.success('导出报表成功！')
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => {
        return filterVal.map(j => v[j])
      })
    },
    /*** 当每页数量发生变化时触发该事件 */
    handleSizeChange(size) {
      console.log(size);
      this.pageSize = size;
      //将每页显示的数量交给成员变量
      this.search(this.pageNo, size);
    },
    /*** 当页码发生变化时触发该事件 */
    handleCurrentChange(page) {
      console.log(page);
      this.pageNo = page;
      //调用查询方法
      this.search(page, this.pageSize);
    },
    // 序号计算
    indexMethod (index) {
      // index默认在0开始，这里+1
      return index + 1 + (this.pageNo - 1) * this.pageSize
    },
  },

};
</script>


<style lang="scss" scoped>
// 标题
.mytitle {
  font-size: larger;
  padding-left: 45%;
  margin-bottom: 16px;
  float: left;
}

//按钮组
.myTime {
  float: right;
}

//格子的样式
.bg-white {
  background: #ffffff;
}

.grid-content {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.calendar ::v-deep .el-button-group::before {
  display: none;
}

.calendar ::v-deep .el-button-group::after {
  display: none;
}

// 分割线样式
.el-divider--horizontal {
  display: block;
  height: 2px;
  width: 100%;
  margin: 24px 0;
}

// 表单各项的样式
.el-form-item {
  margin: 15px 10px 15px 10px;
}
</style>
